<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="js/Cesium/Widgets/widgets.css" />
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/Cesium/Cesium.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<style>
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#contanter{
				width:100%;
				height:100%
			}    
			/* 去除logo信息 */	
			.cesium-widget-credits{ 
				display:none!important; 
				visibility:hide!important; 
			} 
			/* 添加点、线、面的按钮*/
			.addEntities{
				position: fixed;
				left: 110px;
				top: 10px;
				z-index: 99999;
			}
			button{
				background-color: rgba(47,53,60,0.8);
				color: #FFFFFF;
				border: 0;
				padding: 5px 15px;
				border-radius: 5px;
			}
		</style>
    </head>
    <body>
		<div id="contanter"></div>
		<script>
			var viewer = new Cesium.Viewer("contanter",{
				animation: false,  //是否显示动画控件
	            baseLayerPicker: false, //是否显示图层选择控件
	            geocoder: true, //是否显示地名查找控件
	            timeline: false, //是否显示时间线控件
	            sceneModePicker: true, //是否显示投影方式控件
	            navigationHelpButton: false, //是否显示帮助信息控件
	            infoBox: true, //是否显示点击要素之后显示的信息
				// 加载地形数据
				terrainProvider: new Cesium.CesiumTerrainProvider({
					url: Cesium.IonResource.fromAssetId(3956)
				})
			})
			
			// 开始深度监测
			viewer.scene.globe.depthTestAgainstTerrain = true
			viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
			
			var scene = viewer.scene;
			// 点集合
			var positions = []
			
			
			drawPolygon()
			function drawPolygon(){
				// 创建鼠标事件
				var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
				// 鼠标移动事件
				handler.setInputAction(function(movement) {
					 var newPosition = getPosition(movement.endPosition);	
					if(newPosition&&positions.length>0){
						positions.pop();
						positions.push(newPosition);
					}
				},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
				// 左键
				handler.setInputAction(function(movement) {
					var position = getPosition(movement.position)
				    isHeight= true
					if(position){
						if(positions.length==0){
							positions.push(position)
							showPolygon(positions)
						}
						positions.push(position)
						// creatPoint(position)
					}	
				},Cesium.ScreenSpaceEventType.LEFT_CLICK);
				// 右键
				handler.setInputAction(function(movement) {
					// handler.destroy();
					_loadStHelens(viewer.scene.globe)
					_drawPolygon(positions)
					// isHeight = false
					// start()
					// tooltip.setVisible(false)
				},Cesium.ScreenSpaceEventType.RIGHT_CLICK);
			}
			
			
			// 获取鼠标点击的坐标信息
			function getPosition(position){
				// var wp = event.position;
				if (!Cesium.defined(position)) {
				    return;
				}
				var ray = viewer.camera.getPickRay(position);
				if (!Cesium.defined(ray)) {
				    return;
				}
				var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
				if (!Cesium.defined(cartesian)) {
				    return;
				}
				return cartesian
			}
			
			// 动态绘制多边型
			function showPolygon(positions){
				var dynamicPositions = new Cesium.CallbackProperty(function () {
					if (positions.length > 2) {
						var pHierarchy = new Cesium.PolygonHierarchy(positions);
						return pHierarchy;
					} else {
						return null;
					}
				}, false);
				if(dynamicPositions)
					viewer.entities.add({
						polygon: {
							hierarchy: dynamicPositions,
							material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7))
						}
					});
			}
			
// 			viewer.camera.setView({
// 				destination: Cesium.Cartesian3.fromDegrees(128.055, 42.006, 1500)
// 			});
// 			
// 			var position = Cesium.Cartesian3.fromDegrees(128.055, 42.006, 500.0);
// 
// 			var entity = viewer.entities.add({
// 				position: position,
// 				box: {
// 					dimensions: new Cesium.Cartesian3(1400.0, 1400.0, 2800.0),
// 					material: Cesium.Color.WHITE.withAlpha(0.3),
// 					outline: true,
// 					outlineColor: Cesium.Color.WHITE
// 				}
// 
// 			});
// 			
			// var globe = viewer.scene.globe;
			// globe.depthTestAgainstTerrain= true;
			// globe.clippingPlanes= new Cesium.ClippingPlaneCollection({
			// 	modelMatrix:entity.computeModelMatrix(Cesium.JulianDate.now()),
			// 	planes:[
			// 		new Cesium.Plane(new Cesium.Cartesian3(1.0, 0.0, 0.0), -200.0),
			// 	    new Cesium.Plane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -200.0),
			// 	    new Cesium.Plane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -200.0),
			// 		new Cesium.Plane(new Cesium.Cartesian3(0.0, -1.0, 0.0), -200.0)
			// 	],
			// 	edgeWidth:1.0,
			// 	edgeColor:Cesium.Color.WHITE
			// });
			
			// 开挖
			function  _loadStHelens(globe) {
				
				viewer.entities.removeAll()
			  
				// Create clipping planes for polygon around area to be clipped.
				const points = positions
				var pointsLength = points.length; 
				var clippingPlanes = []; // 存储ClippingPlane集合 
				for (var i = 0; i < pointsLength; ++i) { 
					 var nextIndex = (i + 1) % pointsLength; 
					 var midpoint = Cesium.Cartesian3.add(points[i], points[nextIndex], new Cesium.Cartesian3()); 
					  midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint); 
					 
					 var up = Cesium.Cartesian3.normalize(midpoint, new Cesium.Cartesian3()); 
					 var right = Cesium.Cartesian3.subtract(points[nextIndex], midpoint, new Cesium.Cartesian3()); 
					 right = Cesium.Cartesian3.normalize(right, right); 
					 
					 var normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3()); 
					  normal = Cesium.Cartesian3.normalize(normal, normal); 
					 
					 var originCenteredPlane = new Cesium.Plane(normal, 0.0); 
					 var distance = Cesium.Plane.getPointDistance(originCenteredPlane, midpoint); 
					 
					  clippingPlanes.push(new Cesium.ClippingPlane(normal, -5)); 
				} 
				console.log(clippingPlanes)
				globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
					// modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),
					planes: clippingPlanes,
					
					edgeWidth: 0.1,
					edgeColor: Cesium.Color.RED.withAlpha(0.1),
					enabled: true
				});
				
				 let polyStyle = {
					hierarchy : positions,
					height: -700,
					heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
					material:new Cesium.ImageMaterialProperty({
								image: './images/2.jpg',
							}),
					outline: true,
					outlineColor: Cesium.ColorBLUE
				
				}
				let entity = viewer.entities.add({
						polygon: polyStyle
					});
					
				let polyStyleSide = {
					hierarchy :positions,
					height: -700,
					heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
					extrudedHeight:100.0,
					// RELATIVE_TO_GROUND /CLAMP_TO_GROUND
					extrudedHeightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
					material: new Cesium.ImageMaterialProperty({
								image: './images/bg.png',
							}),
					outline: true,
					outlineColor: Cesium.Color.WHITE,
					closeTop: false,
					closeBottom: false
				}
				
				
				
				// let entitySide =viewer.entities.add({
				// 		polygon: polyStyleSide
				// 	});
				// entitySide.polygon.
				// points.length = 0
			}
			var tempEntities = [];
			
			function _drawPolygon(list) {
				let polyStyle = {
					hierarchy : list,
					height: - 200,
					heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
					material:new Cesium.ImageMaterialProperty({
								image: './images/2.jpg',
							}),
					outline: true,
					outlineColor: Cesium.ColorBLUE

				}
				let entity = viewer.entities.add({
						polygon: polyStyle
					});
				// entity.polygon.hierarchy = list
				// tempEntities.push(entity);
				// const imgMaterialSide = new Cesium.ImageMaterialProperty({
				// 	//  image:'http://localhost:8081/models/excavationregion_side.jpg',
				// 	image: './images/bg.jpg',
				// 	// color: Cesium.Color.BLUE,
				// 	// repeat: new Cesium.Cartesian2(4, 4)
				// });
				// let polyStyleSide = {
				// 	height: - 200,
				// 	heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
				// 	extrudedHeight: 0.0,
				// 	// RELATIVE_TO_GROUND /CLAMP_TO_GROUND
				// 	extrudedHeightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
				// 	material: imgMaterialSide,
				// 	outline: true,
				// 	outlineColor: Cesium.Color.WHITE,
				// 	closeTop: false,
				// 	closeBottom: false
				// }
				// let entitySide =viewer.entities.add({
				// 		polygon: polyStyleSide
				// 	});
				// entitySide.polygon.hierarchy = list
			 //    tempEntities.push(entitySide);
			}
							
					
			
		</script>
    </body>
</html>